<template>
  <div class="detail_page">
    <!-- <div @click="handle_cli">详情</div> -->
    <div class="page_content">
      <div class="info_box">
        <div>
          <div class="title_text">分厂/车间</div>
          <div class="title_val">802</div>
        </div>
        <div>
          <div class="title_text">工作方式</div>
          <div class="title_val">{{ rowData.work_type }}</div>
        </div>
        <div>
          <div class="title_text">开展情况(已完成/总计)</div>
          <div class="title_val">{{ rowData.development }}</div>
        </div>
        <div>
          <div class="title_text">结果统计(合格/不合格)</div>
          <div class="title_val">{{ rowData.result_condition }}</div>
        </div>
        <div>
          <div class="title_text">专家姓名</div>
          <div class="title_val">{{ rowData.expert_name }}</div>
        </div>
        <div>
          <div class="title_text">日期</div>
          <div class="title_val">
            {{ rowData.begin_date }}-{{ rowData.end_date }}
          </div>
        </div>
        <el-image class="top_img" lazy :src="detailLogo"></el-image>
      </div>
      <div class="table_box">
        <div class="table_top">
          <span class="table_title"
            >中国兵器工业集团有限公司JP生产现场星级评价</span
          >
          <div class="btn_box">
            <el-button
              :loading="saveStatus"
              class="save_btn"
              @click="save_handle()"
              >保存</el-button
            >
            <el-button class="cancel_btn" @click="returnList_Cli"
              >取消</el-button
            >
          </div>
        </div>
        <el-table
          class="table_item"
          :data="tableData"
          style="width: 100%"
          height="66.5vh"
          header-row-class-name="header_item"
          stripe
          v-loading="tableStatus"
        >
          <el-table-column
            fixed
            align="center"
            type="index"
            label="序号"
            width="50"
          >
          </el-table-column>
          <el-table-column
            fixed
            width="120"
            align="left"
            prop="title_name"
            label="要素"
          >
          </el-table-column>
          <el-table-column
            width="150"
            align="center"
            prop="element"
            label="要求"
          >
          </el-table-column>
          <el-table-column width="380" prop="judge_term" label="评价项点">
          </el-table-column>
          <el-table-column width="380" prop="check_type" label="检查评价方式">
          </el-table-column>
          <el-table-column
            width="380"
            prop="relevant_description"
            label="有关说明"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            width="220"
            align="center"
            label="评价结果"
          >
            <template slot-scope="scope">
              <Radio-group
                v-model="scope.row.judge_result"
                @on-change="radio_change(scope.row.judge_result)"
              >
                <Radio
                  v-for="(item, index) in resList"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</Radio
                >
                <!-- <Radio label="爪哇犀牛"></Radio>
                <Radio label="印度黑羚"></Radio> -->
              </Radio-group>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="270"
            align="center"
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="scope.row.content"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="拍照" width="95">
            <template slot-scope="scope">
              <el-button
                class="edit_btn"
                type="info"
                size="mini"
                @click="handle_cli(scope.row)"
                >操作</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagi_box">
          <el-pagination
            background
            :page-sizes="[10, 30, 50]"
            :current-page="page.pageIndex"
            :page-size="page.pageSize"
            layout="total, prev, pager, next, sizes, jumper"
            :total="page.totals"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <detailDialog
      v-if="detailDialogVisible"
      :visible="detailDialogVisible"
      @plan_upload="handle_upload"
    ></detailDialog>
  </div>
</template>

<script>
import detail_logo from "@/assets/image/detail_logo.png";
import detailDialog from "./detail_dialog";
import { addSql, createTableSql, selectSql, updateSql } from "@/js/uniBridge";

export default {
  components: { detailDialog },
  data() {
    return {
      detailLogo: detail_logo,
      detailDialogVisible: false,
      tableStatus: false,
      saveStatus: false,
      rowData: "",
      resList: [
        { label: "合格", value: "1" },
        { label: "不合格", value: "2" },
        { label: "不涉及", value: "3" },
      ],
      page: { currentSize: 0, pageIndex: 1, pageSize: 10, totals: 0 },
      tableData: [],
    };
  },
  created() {
    this.rowData = this.$route.query;
    this.getQuery();
    console.log("route", this.$route);
  },
  // mounted() {
  //   onMessage(this.receiveMessageFromApp);
  // },
  // beforeDestroy() {
  //   offMessage(this.receiveMessageFromApp);
  // },
  methods: {
    save_handle(row) {
      // 修改
      let updateSqlStr = "";
      // 新增
      let addSqlStr = "";
      let filArr = this.tableData.filter((item) => {
        return item.resut_id || item.content || item.judge_result;
      });
      filArr.forEach((item) => {
        // console.log("item.id", item.id);
        if (item.resut_id) {
          updateSqlStr = `update sc_judge_result set judge_result ='${item.judge_result}',content = '${item.content}' where workshop_id = ${this.rowData.id} and judge_id= ${item.id}`;
          console.log("++++++++++++++++++", updateSql);
          updateSql(updateSqlStr).then((res) => {});
        } else {
          addSqlStr = `insert into sc_judge_result (workshop_id,judge_id,judge_result,content) values (${this.rowData.id},${item.id},'${item.judge_result}','${item.content}')`;
          console.log("adddddddd", addSqlStr);
          addSql(addSqlStr).then();
        }
      });
      this.getQuery();
    },
    handle_upload(val) {
      this.detailDialogVisible = val;
    },
    getQuery(type) {
      if (type != "page") {
        this.page.pageIndex = 1;
        this.page.currentSize = 0;
      }
      this.page.currentSize = (this.page.pageIndex - 1) * this.page.pageSize;
      this.tableStatus = true;
      let sql = `select j.id,title_name,element,
      judge_term,check_type,relevant_description,
      r.judge_result,ifNull(r.content,'') as content,
      r.id as resut_id from sc_judge j left join sc_judge_result r on j.id = r.judge_id and r.workshop_id = ${this.rowData.id} 
      limit ${this.page.currentSize},${this.page.pageSize}`;
      selectSql(sql).then((res) => {
        this.tableStatus = false;
        this.tableData = res;
        this.tableData.forEach((item) => {
          item.rating = item.resut_id;
        });
      });
      // 总条数
      this.totalHandle();
    },
    totalHandle() {
      let sql = `select count(*) as total
            from sc_judge`;
      selectSql(sql).then((res) => {
        // 表格数据
        console.log("总条数", JSON.stringify(res));
        this.page.totals = res[0].total;
        // this.page.totals = this.tableData.length;
      });
    },
    radio_change(val) {
      console.log(val);
    },
    handle_cli() {
      this.detailDialogVisible = true;
    },
    returnList_Cli() {
      this.$router.push({ path: "/list" });
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.getQuery("page");
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getQuery("page");
    },
    // receiveMessageFromApp(msg) {
    //   console.log("hello word 来自uni-App的消息:", msg);
    //   // this.uni_msg = msg;
    //   // 表格数据
    //   this.tableData = JSON.parse(msg);
    //   this.tableData.forEach((item) => {
    //     item.rating = item.resut_id;
    //   });
    //   this.page.totals = this.tableData.length;
    // },
  },
};
</script>

<style lang="less" scoped>
.detail_page {
  // width: 16px;
  height: 100vh;
  // padding: 16px;
  // padding: 32px;
  padding: (32 / 1600) * 100vh (32 / 2560) * 100vw;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;

  .page_content {
    flex: 1;
    background: #fff;
  }

  .info_box {
    // padding: 0 16px;
    // height: 84.5px;

    // padding: 0 32px;
    // height: 169px;
    height: (169 / 1600) * 100vh;
    padding: 0 (32 / 2560) * 100vw;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // font-size: 16px;

    // font-size: 32px;
    font-size: (32 / 2560) * 100vw;
    background: linear-gradient(rgba(24, 144, 255, 0.2), rgba(24, 144, 255, 0));
    // border-bottom: 1px solid #1890ff00;
    // border-bottom: 2px solid #1890ff00;
    border-bottom: (2 / 2560) * 100vw solid #1890ff00;

    .title_text {
      color: #797a80;
      // margin-bottom: 6px;
      // margin-bottom: 12px;
      margin-bottom: (12 / 1600) * 100vh;
    }

    .title_val {
      color: #1f1f1f;
    }

    .top_img {
      // width: 101.5px;
      // height: 84px;
      // width: 203px;
      // height: 168px;
      width: (203 / 2560) * 100vw;
      height: (168 / 1600) * 100vh;
      position: absolute;
      top: 0;
      right: 0;

      .el-image__inner {
        width: 100%;
        height: 100%;
      }
    }
  }

  /deep/ .table_box {
    p {
      margin: 0;
      padding: 0;
    }

    .table_top {
      text-align: center;
      position: relative;
      // padding: 28px 0 20px;
      // padding: 56px 0 40px;
      padding: (56 / 1600) * 100vh 0 (40 / 1600) * 100vh;

      .table_title {
        font-family: YouSheBiaoTiHei;
        font-style: italic;
        font-weight: 400;
        // font-size: 24px;
        // font-size: 48px;
        font-size: (48 / 2560) * 100vw;
        line-height: 100%;
        letter-spacing: 0%;
        color: #1f1f1f;
      }

      .btn_box {
        position: absolute;
        // right: 16px;
        // top: 24px;
        // right: 32px;
        // top: 48px;
        right: (32 / 2560) * 100vw;
        top: (48 / 1600) * 100vh;
        display: flex;

        .save_btn,
        .cancel_btn {
          // width: 96px;
          // height: 32px;
          // font-size: 16px;
          // width: 192px;
          // height: 64px;
          // font-size: 32px;
          width: (192 / 2560) * 100vw;
          height: (64 / 1600) * 100vh;
          font-size: (32 / 2560) * 100vw;
          display: flex;
          align-items: center;
          justify-content: center;
          // border-radius: 50px;
          // border-radius: 100px;
          border-radius: (100 / 2560) * 100vw;
        }

        .save_btn {
          background: #1890ff;
          color: #fff;
        }

        .cancel_btn {
          background: #eff1f5;
          // border: 1px solid #c2c4cc;
          // border: 2px solid #c2c4cc;
          border: (2 / 2560) * 100vw solid #c2c4cc;
          color: #1f1f1f;
        }
      }
    }

    .table_item .el-table__row--striped {
      .el-table__cell {
        background: rgba(24, 144, 255, 0.05);
      }
    }

    .table_item {
      .header_item {
        .el-table__cell {
          color: #1f1f1f !important;
          // font-size: 16px;
          // font-size: 32px;
          font-size: (32 / 2560) * 100vw;
          background: rgba(24, 144, 255, 0.2);
        }
      }
    }

    .ivu-radio-inner {
      // width: 32px;
      // height: 32px;
      width: (32 / 2560) * 100vw;
      height: (32 / 1600) * 100vh;
    }

    .ivu-radio-inner:after {
      // width: 24px;
      // height: 24px;
      // left: 3px;
      // top: 3px;
      // border-radius: 16px;
      width: (24 / 2560) * 100vw;
      height: (24 / 1600) * 100vh;
      left: (3 / 2560) * 100vw;
      top: (3 / 1600) * 100vh;
      border-radius: (16 / 2560) * 100vw;
    }

    .ivu-radio-wrapper {
      // margin-right: 16px;
      margin-right: (24 / 2560) * 100vw;
    }

    .ivu-radio-default {
      // font-size: 32px;
      font-size: (32 / 2560) * 100vw;
    }

    .el-table__cell {
      // padding: 10px 0 !important;
      // padding: 37px 0 45px !important;
      padding: (37 / 1600) * 100vh 0 (45 / 2560) * 100vh !important;
    }

    .el-table .cell {
      // line-height: 32px;
      // font-size: 32px;
      line-height: (32 / 1600) * 100vh;
      font-size: (32 / 2560) * 100vw;
    }

    .el-table__body-wrapper {
      // font-size: 32px;
      font-size: (32 / 2560) * 100vw;
    }

    .el-textarea__inner {
      // font-size: 32px;
      font-size: (32 / 2560) * 100vw;
    }

    .edit_btn {
      // width: 56px;
      // height: 32px;
      // width: 112px;
      // height: 46px;
      width: (112 / 2560) * 100vw;
      height: (46 / 1600) * 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #1890ff;
      // font-size: 16px;
      // border-radius: 32px;
      // font-size: 32px;
      // border-radius: 64px;
      font-size: (32 / 2560) * 100vw;
      border-radius: (64 / 2560) * 100vw;
      background: #e8f4ff;
      border-color: #a3d3ff;
    }
    // .pagi_box {
    //   // margin-top: 12px;
    //   text-align: right;
    //   // padding: 24px 14px 16px 0;
    //   // font-size: 16px;
    //   // padding: 48px 28px 32px 0;
    //   // font-size: 32px;
    //   padding: (48 / 1600) * 100vh (28 / 1600) * 100vw (32 / 1600) * 100vh 0;
    //   // font-size: 32px;
    //   font-size: (32 / 2560) * 100vw;
    //   color: #494a4d;
    //   .el-pagination {
    //     display: flex;
    //     align-items: center;
    //     justify-content: right;
    //     .el-icon-arrow-right,
    //     .el-icon-arrow-left {
    //       // font-size: 24px;
    //       font-size: (24 / 2560) * 100vw;
    //     }
    //     .number {
    //       // width: 44px;
    //       // height: 44px;
    //       width: (44 / 2560) * 100vw;
    //       height: (44 / 1600) * 100vh;
    //     }
    //     .el-pager li {
    //       // line-height: 44px;
    //       // font-size: 32px;
    //       line-height: (44 / 1600) * 100vh;
    //       font-size: (32 / 2560) * 100vw;
    //     }
    //     .el-icon-more,
    //     .el-icon-d-arrow-right {
    //       // width: 44px;
    //       // height: 44px;
    //       width: (44 / 2560) * 100vw;
    //       height: (44 / 1600) * 100vh;
    //     }
    //   }
    //   .btn-prev,
    //   .btn-next {
    //     // width: 44px;
    //     // height: 44px;
    //     width: (44 / 2560) * 100vw;
    //     height: (44 / 1600) * 100vh;
    //     background: #fff;
    //   }
    //   .el-pagination__editor {
    //     // width: 96px;
    //     // height: 44px;
    //     width: (96 / 2560) * 100vw;
    //     height: (44 / 1600) * 100vh;
    //     .el-input__inner {
    //       width: 100%;
    //       height: 100%;
    //       // font-size: 32px;
    //       font-size: (32 / 2560) * 100vw;
    //     }
    //   }
    //   .el-pagination__jump {
    //     margin-left: 0;
    //     color: #494a4d;
    //     // font-size: 32px;
    //     font-size: (32 / 2560) * 100vw;
    //     // height: 44px;
    //     height: (44 / 1600) * 100vh;
    //   }
    //   .el-pagination__sizes,
    //   .el-pagination__total {
    //     color: #494a4d;
    //     // font-size: 32px;
    //     font-size: (32 / 2560) * 100vw;
    //   }
    //   .el-pagination__sizes {
    //     // height: 44px;
    //     // margin-right: 16px;
    //     height: (44 / 1600) * 100vh;
    //     margin-right: (16 / 1600) * 100vh;
    //   }
    //   .el-select--mini {
    //     // width: 167px;
    //     // font-size: 32px;
    //     width: (168 / 2560) * 100vw;
    //     font-size: (32 / 2560) * 100vw;
    //     height: 100%;
    //     .el-input__inner {
    //       // width: 167px;
    //       // height: 44px;
    //       // font-size: 32px;
    //       width: (168 / 2560) * 100vw;
    //       height: (44 / 1600) * 100vh;
    //       font-size: (32 / 2560) * 100vw;
    //     }
    //   }
    //   .el-pager {
    //     font-weight: 400;
    //     color: #494a4d;
    //     .active {
    //       background-color: #fff;
    //       color: #1890ff;
    //       // border: 1px solid #1890ff;
    //       // border: 2px solid #1890ff;
    //     }
    //   }
    // }

    .pagi_box {
      // margin-top: 12px;
      text-align: right;
      // padding: 24px 14px 16px 0;
      // font-size: 16px;
      // padding: 48px 28px 32px 0;
      // font-size: 32px;
      padding: (48 / 1600) * 100vh (28 / 2560) * 100vw (32 / 1600) * 100vh 0;
      font-size: (32 / 2560) * 100vw;
      color: #494a4d;

      .el-pagination {
        display: flex;
        align-items: center;
        justify-content: right;

        .el-icon-arrow-right,
        .el-icon-arrow-left {
          // font-size: 24px;
          font-size: (24 / 2560) * 100vw;
        }

        .number {
          // width: 44px;
          // height: 44px;
          width: (44 / 2560) * 100vw;
          height: (44 / 1600) * 100vh;
        }

        .el-pager li {
          // line-height: 44px;
          // font-size: 32px;
          line-height: (44 / 1600) * 100vh;
          font-size: (32 / 2560) * 100vw;
          background: #fff;
        }

        .el-icon-more,
        .el-icon-d-arrow-right {
          // width: 44px;
          // height: 44px;
          width: (44 / 2560) * 100vw;
          height: (44 / 1600) * 100vh;
        }
      }

      .el-pagination__jump {
        height: (44 / 1600) * 100vh;
        line-height: (44 / 1600) * 100vh;
        margin-left: 0;
        color: #494a4d;
        // font-size: 32px;
        // height: 44px;
        font-size: (32 / 2560) * 100vw;
      }

      .el-pagination .el-select .el-input {
        width: (100 / 2560) * 100vw;
      }

      .btn-prev,
      .btn-next {
        // width: 44px;
        // height: 44px;
        width: (44 / 2560) * 100vw;
        height: (44 / 1600) * 100vh;
        background: #fff;
      }

      .el-pagination__editor {
        // width: 96px;
        // height: 44px;
        width: (96 / 2560) * 100vw;
        height: (44 / 1600) * 100vh;

        .el-input__inner {
          width: 100%;
          height: 100%;
          // font-size: 32px;
          font-size: (32 / 2560) * 100vw;
        }
      }

      .el-pagination__sizes,
      .el-pagination__total {
        color: #494a4d;
        // font-size: 32px;
        font-size: (32 / 2560) * 100vw;
      }

      .el-pagination__sizes {
        // height: 44px;
        // margin-right: 16px;
        height: (44 / 1600) * 100vh;
        line-height: (44 / 1600) * 100vh;
        margin-right: (16 / 2560) * 100vw;
      }

      .el-select--mini {
        // width: 167px;
        height: 100%;
        // font-size: 32px;
        width: (167 / 2560) * 100vw;
        font-size: (32 / 2560) * 100vw;

        .el-input--mini {
          width: 100% !important;
        }

        .el-input__inner {
          // width: 167px;
          // height: 44px;
          // font-size: 32px;
          width: (167 / 2560) * 100vw;
          height: (44 / 1600) * 100vh;
          font-size: (32 / 2560) * 100vw;
          padding-right: (25 / 2560) * 100vw;
        }
      }

      .el-pager {
        font-weight: 400;
        color: #494a4d;

        .active {
          background-color: #fff;
          color: #1890ff;
          // border: 1px solid #1890ff;
          // border: 2px solid #1890ff;
        }
      }
    }
  }
}
</style>